<template>
    <div id="container" ref="container"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Konva from "konva";
import img1 from "@/assets/paper-trace/1.png";

const container = ref(null);

onMounted(() => {
    draw();
});

async function draw() {
    const windowWidth = uni.getSystemInfoSync().windowWidth;

    var stage = new Konva.Stage({
        container: container.value,
        width: windowWidth,
        height: windowWidth,
    });

    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);

    const addImage = () => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = function () {
                const imageObj = new Konva.Image({
                    image: img,
                    x: (windowWidth - img.width / 2) / 2,
                    y: 0,
                    width: img.width / 2,
                    height: windowWidth,
                });
                layer.add(imageObj);
                resolve();
            };
            img.onerror = reject;
            img.src = img1;
        });
    };
    await addImage();

    // create shape
    var box = new Konva.Rect({
        x: 70,
        y: 45,
        width: 140,
        height: 15,
        fill: "rgba(255, 170, 170, 0.5)",
    });
    layer.add(box);

    // 定义波浪路径参数
    const amplitude = 0.5; // 波峰高度
    const lineWidth = 2; // 线宽
    const points = [];

    // 生成波浪路径点
    for (let x = 70; x < 200; x += 2) {
        const wavelength = ~~(Math.random() * 5) + 5; // 波长
        const y = amplitude * Math.sin((x * Math.PI) / wavelength);
        points.push(x, y + 152); // y轴偏移50使波浪居中
    }

    // 创建波浪线
    const waveLine = new Konva.Line({
        points: points,
        stroke: "#00ff00", // 绿色
        strokeWidth: lineWidth,
        lineCap: "round", // 圆角端点
        lineJoin: "round", // 圆角连接
        closed: false,
        tension: 0.5, // 曲线平滑度
    });

    layer.add(waveLine);

    // 创建段落覆盖
    const paraPoints = [
        [95, 215, 205],
        [70, 230, 230],
        [70, 245, 230],
        [70, 260, 140],
    ];
    for (let i = 0; i < paraPoints.length; i++) {
        const [x, y, width] = paraPoints[i];
        let itemBox = new Konva.Rect({
            x,
            y,
            width,
            height: 15,
            fill: "rgba(255, 255, 255, 0.7)",
        });
        layer.add(itemBox);
    }

    // 创建波浪线序号圆标
    const circle = new Konva.Circle({
        x: 63,
        y: 145,
        radius: 7,
        fill: "#1AFA29",
    });
    const text = new Konva.Text({
        x: 60,
        y: 140,
        text: "1",
        fontSize: 10,
        fontWeight: "bold",
        fill: "#fff",
        align: "center",
    });
    layer.add(circle);
    layer.add(text);
    // 创建波浪线序号圆标
    const circle2 = new Konva.Circle({
        x: 85,
        y: 220,
        radius: 7,
        fill: "#1296DB",
    });
    const text2 = new Konva.Text({
        x: 82,
        y: 215,
        text: "1",
        fontSize: 10,
        fontWeight: "bold",
        fill: "#fff",
        align: "center",
    });
    layer.add(circle2);
    layer.add(text2);
}
</script>
<style lang="scss" scoped></style>
